S07-01 数据可视化-CSS3动画-API
[TOC]
API-CSS3
索引
形变
- transform：
<transform-function>：用于对元素进行变换的属性，可以应用于 2D 和 3D 变换。可以平移、旋转、缩放和倾斜。 - transform-origin：
x y? z?，用于定义一个元素进行变换时的原点。只能在配合transform属性使用时生效。 - transform-style：
flat | preserve-3d，指定子元素如何在 3D 空间中呈现。主要与transform属性配合使用。 - backface-visibility：
visible | hidden，指定某个元素当背面朝向观察者时是否可见。常与transform属性结合使用。 - perspective：
d：通过定义观察者与Z=0平面之间的距离，在 3D 空间中设置一个元素的透视效果。设置在父元素上。
动画
- animation：
name duration timing-function? delay? iteration-count? direction? fill-mode? play-state?，创建动画效果的属性。通过定义多个关键帧（keyframes）来控制元素在一定时间内的状态变化。可以指定动画的持续时间、延迟、播放次数、播放速度等。 - @keyframes animation-name：
{from, to} | {0%, ..., 100%}，定义动画的关键帧（从一个状态到另一个状态的过渡）的规则。通过from和to或者百分比值来定义。
形变
transform
2D动画
transform：<transform-function>：用于对元素进行变换的属性，可以应用于 2D 和 3D 变换。可以平移、旋转、缩放和倾斜。
translate()：
(x,y)：平移元素。csstransform: translate(50px, 100px);scale()：
(x,y)：缩放元素，x和y分别表示水平方向和垂直方向的缩放因子。csstransform: scale(1.5, 2);rotate()：
(angle)：旋转元素，角度可以是正值（顺时针）或负值（逆时针）。csstransform: rotate(45deg);skew()：
(x,y)：倾斜元素，x是水平方向的倾斜角度，y是垂直方向的倾斜角度。csstransform: skew(20deg, 10deg);
perspective()：
(d)：用于创建 3D 效果的属性，它定义了观察者与 Z=0 平面之间的距离。用于启用 3D 变换。css.container { perspective: 1000px; /* 设置透视距离 */ } .box { transform: rotateY(45deg); /* 应用 3D 旋转 */ }
3D动画
transform：<transform-function>：用于对元素进行变换的属性，可以应用于 2D 和 3D 变换。可以平移、旋转、缩放和倾斜。
- 注意： 3D 形变函数会创建一个合成层来启用 GPU 硬件加速，提高渲染速度。如： xxx3d()、 xxxZ()函数
translate3d()
translate3d()：
(x,y,z)：在二、三维平面上平移元素。translate()：
(x,y)：在二维平面上平移元素。translateX()：
(x)：在x轴上平移元素。translateY()：
(y)：在y轴上平移元素。translateZ()：
(z)：在z轴上平移元素。x：
px | %，移动向量的x坐标。y：
px | %，默认：0，移动向量的y坐标。z：
px，移动向量的z坐标。它不能是<percentage>值；那样的移动是没有意义的。注意： 百分比单位参照元素本身。
- css
transform: translate3d(100px, 200px, 0); transform: perspective(300px) translate3d(0, 0, 100px); 
scale3d()
scale3d()：
(x,y,z)：缩放元素，x、y和z分别表示水平方向、垂直方向和Z轴方向的缩放因子。小于1表示缩小，大于1表示放大。scale()：
(x,y)：在二维平面上缩放元素。scaleX()：
(x)：在x轴上缩放元素。scaleY()：
(y)：在y轴上缩放元素。scaleZ()：
(z)：在z轴上缩放元素。x：
number，缩放向量的横坐标。y：
number，缩放向量的纵坐标。z：
number，缩放向量的 z 分量的 a（再讲到 3D 正方体再演示）。- scss
transform: scale3d(2, 1, 1); // 等价于 transform: scaleX(2); transform: scale3d(1, 2, 1); // 等价于 transform: scaley(2); transform: scale3d(1, 1, 2); // 等价于 transform: scaleZ(2);
rotate3d()
rotate3d()：
(x?,y?,z?,angle)：旋转元素，角度可以是正值（顺时针）或负值（逆时针）。rotate()：
(angle)：在二维平面上旋转元素。rotateX()：
(angle)：在x轴上旋转元素。rotateY()：
(angle)：在y轴上旋转元素。rotateZ()：
(angle)：在z轴上旋转元素。相当于rotate(angle)。x?：
number，可以是 0 到 1 之间的数值，表示旋转轴 X 坐标方向的矢量( 用来计算形变矩阵中的值 )。y?：
number，可以是 0 到 1 之间的数值，表示旋转轴 Y 坐标方向的矢量。z?：
number，可以是 0 到 1 之间的数值，表示旋转轴 Z 坐标方向的矢量。angle：
deg | rad | turn，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。- css
/* 一个值：表示 z 轴 旋转的角度 */ transform: rotate3d(45deg); /* 四个值：表示在3D空间之中，旋转有x,y,z个旋转轴和一个旋转角度。 */ transform: rotate3d(0, 0, 1, 45deg); 
skew()
skew()：
(x,y)：倾斜元素。skewX()：
(x)：在x轴上倾斜元素。skewY()：
(y)：在y轴上倾斜元素。x：
deg | rad | turn，水平方向的倾斜角度。y：
deg | rad | turn，默认：0，垂直方向的倾斜角度。- css
transform: skew(20deg, 10deg);
perspective()
perspective()：
(d)：通过定义观察者与Z=0平面之间的距离，在 3D 空间中设置一个元素的透视效果。作为transform样式的函数使用。d：
px | em | rem | none，一个长度值，定义了观察者与 z = 0 平面的距离。常见的值有：100px：较强的透视效果，深度感显著。500px：适中的透视效果。1000px或更大：较弱的透视效果，深度感较轻微。none：没有应用 perspective 样式时的默认值。0px | 负值：无透视效果。
注意：
perspective样式是设置在父元素上的，只有其子元素在进行 3D 变换时，才能看到透视效果。
在当前元素上使用perspective()函数
- html
<style> .box { transform: perspective(200px) rotateY(45deg); /* 使用透视函数，应用3D旋转 */ } </style> <body> <box class="box"></box> </body> 
transform-origin
transform-origin：x y? z?，用于定义一个元素进行变换时的原点。只能在配合 transform 属性使用时生效。
x：
length | percentage | keyword，默认：50%，水平位置y?：
length | percentage | keyword，默认：50%，垂直位置z?：
length，默认：0，表示在 3D 变换中的深度位置css.box { transform-origin: 100px 50% 0; /* 水平100px，垂直50%的位置，Z轴0 */ transform: rotate(30deg) scale(1.2); /* 旋转30度并放大1.2倍 */ }
transform-style
transform-style：flat | preserve-3d，指定子元素如何在 3D 空间中呈现。主要与 transform 属性配合使用。
flat：默认，元素的子元素位于元素本身的平面内。preserve-3d：元素的子元素位于 3D 空间中。注意： 该样式需要设置在父元素上。
- css
.container { perspective: 1000px; /* 为子元素设置透视 */ transform-style: preserve-3d; /* 允许子元素保持 3D 变换 */ } .box { transform: rotateY(45deg) translateZ(50px); /* 在Y轴旋转，并向Z轴前移 */ } 
backface-visibility
backface-visibility：visible | hidden，指定某个元素当背面朝向观察者时是否可见。常与 transform 属性结合使用。
visible：默认，元素的背面在 3D 变换时是可见的。hidden：元素的背面在 3D 变换时是不可见的。- css
backface-visibility: visible; backface-visibility: hidden; 
动画
animation
animation：name duration timing-function? delay? iteration-count? direction? fill-mode? play-state?，创建动画效果的属性。通过定义多个关键帧（keyframes）来控制元素在一定时间内的状态变化。可以指定动画的持续时间、延迟、播放次数、播放速度等。
name：
string，定义动画的名字。名字与@keyframes规则中定义的关键帧动画名称对应。duration：
s | ms，定义动画的持续时间。timing-function?：
<timing-function>，定义动画进度的加速和减速方式。常用值有：linear：动画均匀速率ease：动画以较慢的速度开始，然后加速，再减速ease-in：动画从慢到快ease-out：动画从快到慢ease-in-out：动画先慢后快再慢cubic-bezier(n,n,n,n)：自定义的贝塞尔曲线（通过四个数值定义）
delay?：
s | ms，默认：0，定义动画开始前的延迟时间。iteration-count?：
number | infinite，定义动画的播放次数。number：播放指定次数infinite：无限次播放动画
direction?：
normal | reverse | alternate | alternate-reverse，默认：normal，定义动画的播放方向normal：按正常方向播放reverse：反向播放alternate：反向播放并交替alternate-reverse：先反向播放，然后交替
fill-mode?：
none | forwards | backwards | both，默认：none，控制元素在动画结束后如何表现。none：动画结束后恢复到初始状态（默认值）forwards：动画结束后保持在最后一个关键帧状态backwards：动画开始之前，元素采用动画的第一个关键帧both：同时应用forwards和backwards
play-state?：
running | paused，控制动画是否播放或暂停。running：动画正在播放paused：动画暂停
- css
@keyframes example { 0% { transform: scale(1); opacity: 0; } 50% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } .element { animation: example 3s ease-in-out 1s infinite alternate; }
@keyframes
@keyframes animation-name：{from, to} | {0%, ..., 100%}，定义动画的关键帧（从一个状态到另一个状态的过渡）的规则。通过 from 和 to 或者百分比值来定义。
animation-name：
string，动画帧的名字，可以在animation中使用。from、0%：
{}，动画的初始状态。to、100%：
{}，动画的结束状态。n%：
{}，动画某个中间段的状态。- css
@keyframes example { 0% { transform: scale(1); opacity: 0; } 50% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } .element { animation: example 3s ease-in-out 1s infinite alternate; }